<!DOCTYPE html>
<html>
<head>
    <title>列表/表格/表单标签</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/farbox/basic.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/farbox/main.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>
    
        <a href="./index.html" id="go_to_home"> &lt; home </a>
    
    <div id="sidebar">
        <ul id="sidebar_body">
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./01工具使用及基本标签.html" class="">开发工具使用及基本标签</a>
                </li>
            

            
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./02列表与表格与表单标签.html" class="selected">列表/表格/表单标签</a>
                </li>
            

            
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./03网页样式表.html" class="">网页样式表</a>
                </li>
            

            
        
        </ul>
    </div>

    <div id="main">
        <div class="content_body">
            <h1 class="title"> 列表/表格/表单标签 </h1>
            <div class="doc_post"> <p class="md_block">

<div class="toc"><ul>
<li>
<a href="#toc_0">列表/表格/表单标签</a>
<ul>
<li>
<a href="#toc_1">列表标签</a>
<ul>
<li>
<a href="#toc_2">无序列表</a>
</li>
<li>
<a href="#toc_3">有序列表</a>
</li>
</ul>
</li>
<li>
<a href="#toc_4">表格</a>
<ul>
<li>
<a href="#toc_5">表格的基本结构</a>
</li>
<li>
<a href="#toc_6">表格的基本语法</a>
</li>
<li>
<a href="#toc_7">实例:商品列表页</a>
</li>
<li>
<a href="#toc_8">表格的跨行与跨列</a>
<ul>
<li>
<a href="#toc_9">实列:完成分类商品页面</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#toc_10">表单</a>
<ul>
<li>
<a href="#toc_11">表单元素</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>


<h2 id="toc_1">列表标签</h2>

<h3 id="toc_2">无序列表</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span>    <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;circle&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">ul做为无序列表的申明,li表示每个列表项,li的位置在ul标签的里面.</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span>    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>西瓜<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>苹果<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>芒果<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>哈蜜瓜<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_3">有序列表</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span>    <span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>西瓜<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>苹果<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>芒果<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>哈蜜瓜<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_4">表格</h2>

<h3 id="toc_5">表格的基本结构</h3>

<p class="md_block">
    <span class="md_line">表格有行与列,由一个个单元格组成.单元格是表格组成的最小单元,单元格的横向排列组成行,单元元格的纵向排列组成列.</span>
</p>


<h3 id="toc_6">表格的基本语法</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span>        <span class="p">&lt;</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;1&quot;</span> <span class="na">cellspacing</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="na">cellpadding</span><span class="o">=</span><span class="s">&quot;3&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>第一列<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>第二列<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>第三列<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>内容1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>内容2<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>内容3<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">table标签申明一个表格<br /></span>
    <span class="md_line">tr标签表示行<br /></span>
    <span class="md_line">td或首行用th表示列.<br /></span>
    <span class="md_line">表格各标签嵌套顺序  表格中有行 行中有列</span>
</p>


<h3 id="toc_7">实例:商品列表页</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span>        <span class="p">&lt;</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;1&quot;</span> <span class="na">cellspacing</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="na">cellpadding</span><span class="o">=</span><span class="s">&quot;3&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>商品名称<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>价格(元)<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>生产日期<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>海尔洗衣机<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1800.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2017-05-05<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>格力空调<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2800.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2017-05-01<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>TCL电视机<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1800.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2017-03-03<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_8">表格的跨行与跨列</h3>

<p class="md_block">
    <span class="md_line">colspan:跨列<br /></span>
    <span class="md_line">rowspan:跨行</span>
</p>


<h4 id="toc_9">实列:完成分类商品页面</h4>
<div class="codehilite code_lang_html  highlight"><pre><span></span>        <span class="p">&lt;</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;1&quot;</span> <span class="na">cellspacing</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="na">cellpadding</span><span class="o">=</span><span class="s">&quot;3&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>分类<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>商品名称<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>价格(元)<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>生产/出版日期<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">rowspan</span><span class="o">=</span><span class="s">&quot;3&quot;</span><span class="p">&gt;</span>电器<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>海尔洗衣机<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1800.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2017-05-05<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>格力空调<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2800.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2017-05-01<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>TCL电视机<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1800.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2017-03-03<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">rowspan</span><span class="o">=</span><span class="s">&quot;2&quot;</span><span class="p">&gt;</span>图书<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>C++程序设计<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>65.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2016-01-23<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>C数据结构与算法<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>35.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2015-03-03<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>备注:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">&quot;3&quot;</span><span class="p">&gt;</span>共2个分类,5个商品.<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_10">表单</h2>

<p class="md_block">
    <span class="md_line">向服务器发送数据用<br /></span>
    <span class="md_line">基本语法</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span>        <span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&quot;#&quot;</span> <span class="na">method</span><span class="o">=</span><span class="s">&quot;post&quot;</span><span class="p">&gt;</span>
            
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;submit&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;提交&quot;</span><span class="p">/&gt;</span>
        <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">表单两个非常重要的属性:<br /></span>
    <span class="md_line">action:提交地址(向何处发送表单数据),如果不填,则默认提交到本页<br /></span>
    <span class="md_line">method:提交方式:get 与 post</span>
</p>


<h3 id="toc_11">表单元素</h3>

<p class="md_block">
    <span class="md_line">input标签</span>
</p>

<table>
 <thead><tr><th style="text-align:left">值</th>
<th style="text-align:left">描述</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">text     </td>
<td style="text-align:left">  定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。</td>
</tr>
<tr><td style="text-align:left">password         </td>
<td style="text-align:left"> 定义密码字段。该字段中的字符被掩码。</td>
</tr>
<tr><td style="text-align:left">checkbox     </td>
<td style="text-align:left">  定义复选框。</td>
</tr>
<tr><td style="text-align:left">file     </td>
<td style="text-align:left">  定义输入字段和 "浏览"按钮，供文件上传。</td>
</tr>
<tr><td style="text-align:left">hidden   </td>
<td style="text-align:left">  定义隐藏的输入字段。</td>
</tr>
<tr><td style="text-align:left">radio    </td>
<td style="text-align:left">  定义单选按钮。</td>
</tr>
<tr><td style="text-align:left">reset    </td>
<td style="text-align:left">  定义重置按钮。重置按钮会清除表单中的所有数据。</td>
</tr>
<tr><td style="text-align:left">submit       </td>
<td style="text-align:left"> 定义提交按钮。提交按钮会把表单数据发送到服务器。</td>
</tr>
<tr><td style="text-align:left">image    </td>
<td style="text-align:left">  定义图像形式的提交按钮。</td>
</tr>
<tr><td style="text-align:left">button   </td>
<td style="text-align:left">  定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。</td>
</tr>
</tbody> 
</table>
<!--block_code_end-->
<p class="md_block">
    <span class="md_line">表单元素除了input标签外,还可以是 textarea 或 select 或 label也是常用的.<br /></span>
    <span class="md_line">制作贵美商城注册页面.不要求美化.<br /></span>
    <span class="md_line">在浏览器中显示效果:<br /></span>
    <span class="md_line md_line_dom_embed"><img onerror="this.src='../_image/2017-06-19-17-47-14.jpg';this.onerror=null;"  class="" src="/_image/2017-06-19-17-47-14.jpg" alt="" title="" ></span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span>        <span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">method</span><span class="o">=</span><span class="s">&quot;post&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;1&quot;</span> <span class="na">cellspacing</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">cellpadding</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>用户名:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;username&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>登陆名:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;logname&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>密码:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;password&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;password&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>再次确认密码:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;password&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;password1&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>电子邮箱:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;email&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>性别:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;radio&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;sex&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;男&quot;</span> <span class="p">/&gt;</span>男 <span class="ni">&amp;nbsp;</span><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;radio&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;sex&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;女&quot;</span> <span class="p">/&gt;</span>女<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>   
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>头像<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;file&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;file&quot;</span> <span class="na">accept</span><span class="o">=</span><span class="s">&quot;image/gif,image/x-ms-bmp,image/bmp,image/png&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>爱好:<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;love&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;运动&quot;</span> <span class="p">/&gt;</span>运动
                        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;love&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;聊天&quot;</span> <span class="p">/&gt;</span>聊天
                        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;love&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;玩游戏&quot;</span> <span class="p">/&gt;</span>玩游戏
                    <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>出生日期<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">size</span><span class="o">=</span><span class="s">&quot;4&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;year&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;</span>年
                        <span class="p">&lt;</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;month&quot;</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;01&quot;</span><span class="p">&gt;</span>01<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;02&quot;</span><span class="p">&gt;</span>02<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;03&quot;</span><span class="p">&gt;</span>03<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;04&quot;</span><span class="p">&gt;</span>04<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;05&quot;</span><span class="p">&gt;</span>05<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;06&quot;</span><span class="p">&gt;</span>06<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;07&quot;</span><span class="p">&gt;</span>07<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;08&quot;</span><span class="p">&gt;</span>08<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;09&quot;</span><span class="p">&gt;</span>09<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;10&quot;</span><span class="p">&gt;</span>10<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;11&quot;</span><span class="p">&gt;</span>11<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;12&quot;</span><span class="p">&gt;</span>12<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                        <span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>月
                        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;day&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">size</span><span class="o">=</span><span class="s">&quot;3&quot;</span> <span class="p">/&gt;</span>日
                    <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">&quot;2&quot;</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;reset&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;重置&quot;</span> <span class="p">/&gt;</span>
                        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;submit&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;登陆&quot;</span> <span class="p">/&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">input标签常用属性<br /></span>
    <span class="md_line">name,type,value,size,maxlength,checked</span>
</p> </div>
        </div>

    </div>





<script>
    // auto focus for menu
    window.onload = function(){
        var sidebar = document.getElementById('sidebar');
        var current = document.getElementsByClassName('selected')[0];
        if (current && sidebar){
            sidebar.scrollTop = current.offsetTop - sidebar.clientHeight/2 + 100
        }
    };
</script>




</body>

</html>